<template>
  <div>

    <div class="mt-[32px]">
      <el-form label-width="130px" :rules="rules" :model="form" ref="FormRef">
        <el-form-item :label="item.name" :prop="item.code"
                      v-for="(item,index) in config"
                      :key="index"
        >

          <el-input v-model="form[item.code]"
                    v-if="!item.type"
          />
          <el-select v-model="form[item.code]"
                     :filterable="true"
                     :multiple="item.multiple"
                     v-if="item.type == 'select'"
          >
            <el-option v-for="(it,idx) in item.list" :key="idx"
                       :label="it[item.label]" :value="it[item.value]"
            />
          </el-select>

          <UploadImg v-model="form[item.code]" v-if="item.type == 'upload'"/>

        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script setup lang="ts">
import {useRoute} from "vue-router";
import UploadImg from "@/components/UploadFile/src/UploadImg.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import {listToMap, formError, deepCopy} from "@/utils";

const route = useRoute();

import {WebDiyTemplateApi} from "@/api/template";


import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";

const portType = getStrDictOptions(DICT_TYPE.FIT_PORT)
const landingType = getStrDictOptions(DICT_TYPE.PRODUCT_FORM_TYPE )
const marktingType = getStrDictOptions(DICT_TYPE.MARKETING_FEATURES_TYPE  )


const props = defineProps({
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const FormRef = ref(null);

const provinceData = ref([])

const config = ref(
  route.query?.type == 1 ?
  [
  {
    name: "缩略图",
    code: "previewPicUrls",
    required: true,
    type: "upload",
  },
  {
    name: "模板名称",
    code: "name",
    required: true,
  },
  {
    name: "模板编码",
    code: "property",
    required: true,
  },
  {
    name: "适用端口",
    code: "applicablePorts",
    type: "select",
    label: "label",
    value: "value",
    list: portType,
    multiple:true,
    required: true,
  },

]
  :
    [
      {
        name: "缩略图",
        code: "previewPicUrls",
        required: true,
        type: "upload",
      },
      {
        name: "模板名称",
        code: "name",
        required: true,
      },
      {
        name: "模板编码",
        code: "property",
        required: true,
      },
      {
        name: "落地页形态",
        code: "landingPageForm",
        type:"select",
        multiple:false,
        list:landingType,
        label:"label",
        value:"value",
        required: true,
      },
      {
        name: "营销功能",
        code: "marketingFeatures",
        type:"select",
        list:marktingType,
        multiple:true,
        label:"label",
        value:"value",
        required: true,
      },
      {
        name: "推荐场景",
        code: "recommendedScenario",
        required: true,
      },
      {
        name: "适用端口",
        code: "applicablePorts",
        type: "select",
        label: "label",
        value: "value",
        list: portType,
        multiple:true,
        required: true,
      },

    ]
)

const rules = computed(() => {
  let map = listToMap(config.value, 'code');

  for (let i in map) {
    if (map[i].required) {
      if (map[i].type == 'select' || map[i].type == 'upload') {
        map[i] = [{required: true, message: `请选择${map[i].name}`, trigger: 'change'}]
      } else {
        map[i] = [{required: true, message: `请输入${map[i].name}`, trigger: 'blur'}]
      }
    }

  }
  return map
})


const form = ref({})

const confirm = async (callback) => {

  try {
    let res = await FormRef.value.validate();


    let option = {
      ...form.value,
      type: route.query?.type,
     // property: `${+new Date()}`,
      applicablePorts: form.value.applicablePorts && form.value.applicablePorts.join(','),
      marketingFeatures: form.value.marketingFeatures && form.value.marketingFeatures.join(','),
    }


    if (form.value.id) {
      await WebDiyTemplateApi.updateWebDiyTemplate(option);
    } else {
      await WebDiyTemplateApi.createWebDiyTemplate(option);
    }
    callback && callback()
  } catch (e) {
    formError()
  }

}


onMounted(() => {
})

defineExpose({
  confirm
})

watch(() => props.info, () => {
  form.value = props.info;
}, {
  deep: true,
  immediate: true
})
</script>
<style lang="scss" scoped>

</style>
